﻿<!DOCTYPE html>
<!--[if IE 8 ]>
<html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"><!--<![endif]-->
<head>

    <!-- Basic Page Needs
    ================================================== -->
    <meta charset="utf-8"/>
    <title>商品管理</title>

    <!-- Mobile Specific Metas
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

    <!-- CSS
    ================================================== -->
    <link rel="stylesheet" href="css/style.css" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" href="css/colors/green.css" th:href="@{/css/colors/green.css}" id="colors"/>

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body class="boxed">
<div id="wrapper">


    <!-- Top Bar
    ================================================== -->
    <div th:replace="fragments/topbar :: topbar"></div>


    <div class="clearfix"></div>


    <!-- Header
================================================== -->
    <div class="container">

        <!-- Logo -->
        <div class="four columns">
            <div id="logo">
                <h1><a th:href="@{/index}"><img th:src="@{/images/logo.png}" alt="Trizzy"/></a></h1>
            </div>
        </div>

    </div>


    <!-- Titlebar
    ================================================== -->
    <section class="titlebar margin-top-20">
        <div class="container">
            <div class="sixteen columns">
                <h2>商品管理</h2>

                <nav id="breadcrumbs">
                    <ul>
                        <li><a th:href="@{/adminManagement}">后台管理中心</a></li>
                        <li>商品管理</li>
                    </ul>
                </nav>
            </div>
        </div>
    </section>


    <!-- Content
    ================================================== -->

    <!-- Container -->
    <div class="container margin-top-30">

        <!-- Filters -->
        <div class="sixteen columns">
            <div id="filters" class="filters-dropdown headline"><span></span>
                <ul class="option-set" data-option-key="filter">
                    <li><a href="item-management.html" class="selected" data-filter="*">所有商品</a></li>
                    <li><a class="popup-with-zoom-anim color" href="#small-dialog">上架新商品</a></li>
                </ul>
            </div>
        </div>
        <div class="clearfix"></div>

        <div id="small-dialog" class="zoom-anim-dialog mfp-hide">
            <h2 class="margin-bottom-10">上架新商品</h2>
            <form method="post" class="login" th:action="@{/addItem}" th:object="${item}">
                <p class="form-row form-row-wide">
                    <label>名称: <span class="required">*</span></label>
                    <input type="text" class="input-text" name="name" id="name" th:field="*{name}"/>
                </p>
                <p class="form-row form-row-wide">
                    <label>分类: <span class="required">*</span></label>
                    <select id="category" name="category"  th:field="*{category}">
                        <option value="1">狗类宠物</option>
                        <option value="2">猫类宠物</option>
                        <option value="3">兔类宠物</option>
                        <option value="4">鸟类宠物</option>
                        <option value="5">其他宠物</option>
                        <option value="6">饲料</option>
                        <option value="7">洗漱用品</option>
                        <option value="8">宠物服饰</option>
                        <option value="9">宠物居屋</option>
                        <option value="10">其他商品</option>
                    </select>
                </p>
                <p class="form-row form-row-wide">
                    <label>标题: <span class="required">*</span></label>
                    <input type="text" class="input-text" name="title" id="title" th:field="*{title}"/>
                </p>
                <p class="form-row form-row-wide">
                    <label>库存: <span class="required">*</span></label>
                    <input type="text" class="input-text" name="num" id="num" th:field="*{num}" value="0"/>
                </p>
                <p class="form-row form-row-wide">
                    <label>价格: <span class="required">*</span></label>
                    <input type="text" class="input-text" name="price" id="price" th:field="*{price}" value="0"/>
                </p>
                <p class="form-row form-row-wide">
                    <label>描述: <span class="required">*</span></label>
                    <textarea cols="40" rows="3" id="decription" name="description" th:field="*{description}"></textarea>
                </p>
                <p class="form-row">
                    <label>图片: <span class="required">*</span></label>
                    <input type="file"/>
                </p>
                <p class="form-row">
                    <input type="submit" class="button" name="login" value="上架"/>
                </p>
            </form>
        </div>


        <!-- Products -->
        <div class="products">

            <div th:each="singleitem,itemStat : ${items}">

                <!-- Product #1 -->
                <div class="four columns">
                    <figure class="product">
                        <div class="mediaholder">
                            <a th:href="@{/itemInfo(item_id = ${singleitem.item_id})}">
                                <img alt="" th:src="@{'/images/' + ${singleitem.image}}" />
                                <div class="cover">
                                    <img alt="" th:src="@{'/images/' + ${singleitem.image}}" />
                                </div>
                            </a>
                            <a th:href="@{/itemInfo(item_id = ${singleitem.item_id})}" class="product-button">管理</a>
                        </div>

                        <a href="item-info.html">
                            <section>
                                <span class="product-category" th:text="'商品号：' + ${singleitem.item_id}"></span>
                                <h5 th:text="${singleitem.name}"></h5>
                            </section>
                        </a>
                    </figure>
                </div>

            </div>

            <div class="clearfix"></div>


            <!-- Pagination -->
            <div class="pagination-container">
                <nav class="pagination">
                    <ul>
                        <li><a href="#" class="current-page">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                    </ul>
                </nav>

                <nav class="pagination-next-prev full-width">
                    <ul>
                        <li><a href="#" class="prev"></a></li>
                        <li><a href="#" class="next"></a></li>
                    </ul>
                </nav>
            </div>

        </div>
        <!-- Portfolio Wrapper / End -->

    </div>
    <!-- Container / End -->

    <div class="margin-top-30"></div>

    <!-- Footer
         ================================================== -->
    <div th:replace="fragments/footer :: footer"></div>

</div>


<!-- Java Script
================================================== -->
<div th:replace="fragments/scripts :: scripts"></div>


<!-- Style Switcher
================================================== -->
<div th:replace="fragments/styleswitcher :: styleswitcher"></div>


</body>
</html>